<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">添加字段</Col>
       </Row>
       <div class="table-box" style="overflow: auto;">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="输入名称"></Input>
                </FormItem>
                <FormItem label="表字段名" prop="field">
                    <Input v-model="formValidate.field" placeholder="输入表字段名称"></Input>
                </FormItem>
                <FormItem label="字段分类" prop="formType">
                    <Select v-model="formValidate.formType" placeholder="请选择">
                        <Option v-for="(item, index) in fieldType" :key="index" :value="index">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="可能值" prop="val">
                    <Input v-model="formValidate.val" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入···"></Input>
                </FormItem>
                <FormItem label="注释" prop="comment">
                    <Input v-model="formValidate.comment" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入···"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交添加</Button>
                </FormItem>
            </Form>
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var modelId = parseInt(this.$route.query.modelId);

           return {
                modelId: modelId,
                fieldType: this.$fieldType.fieldType,
                formValidate: {
                    name: '',
                    field: '',
                    formType: 0,
                    val: '',
                    comment: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ],
                    field: [
                        { required: true, trigger: 'blur', validator: function(rule, value, callback){
                            var reg = /^[a-zA-Z]+[_]?[a-zA-Z]+$/;
                            if(!reg.test(value)){
                                callback(new Error('不能为空！必须是a-z、_、A-Z字符组成！'));
                            }
                            callback();
                        } }
                    ],
                    formType: [
                        { required: true, message: '不能为空！'}
                        ],
                    val: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ],
                    comment: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ]
                }
           };
        },
        created: function () {
        },
        mounted() {
        },
        methods: {
            handleSubmit (name) {
                var that = this;

                this.$refs[name].validate((valid) => {
                    if (valid) {
                        that.$loading.show('添加中');
                        that.$util.ajax({
                            that: that,
                            url: '/field/add/',
                            data: {
                                name: that.formValidate.name,
                                modelId: that.modelId,
                                field: that.formValidate.field,
                                formType: that.formValidate.formType,
                                val: that.formValidate.val,
                                comment: that.formValidate.comment
                            },
                            success: function(data){
                                that.$router.go(-1);
                            },
                            fail: function(msg){
                                that.$Message.info(msg);
                            },
                            complete: function(){
                                that.$loading.hide();
                            }
                        })
                    }
                })
            }
        }
    }
</script>
<style scoped>
</style>